<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			#top{
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: #e0e0e0;
			}
			#main{
				height: 50px;
				color: white;
				background-color: #333;
				text-align: center;
				line-height: 50px;
				
			}
			/* 样式：吸顶灯卡页面顶部 */
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
			#last{
				height: 8000px;
				background-color: #e0e0e0;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			//ready()事件源语法：$(document).ready(function(){});
			//总结：页面元素全部加载完毕，在执行JQ相关操作
			//script元素放在最后一个body位置【可不写】
		
		
		$(function(){
			
			
			//固定值：页面顶部到吸顶灯位置--BOM语法
			//offset()   获取或者设置元素相对于文档偏移
			//offset().top  从顶部到吸顶灯元素的偏移量
			    var se=$("#main").offset().top;
				
			//滚动值：BOM对象+事件源 
			//$(window) 抓取页面window对象，监听窗口事件：窗口改变、滚动
			$(window).scroll(function(){
				//滚动值：获取页面滚动位置
				var st=$(window).scrollTop();
				
				//判断 滚动值大于固定值，滚动超过200，实现切换：吸顶效果
				if(se<st){
					//条件成立：大于200px  切换吸顶效果
					$("#main").addClass("sticky");
				}else{
					//条件不成立：小于200px
					$("#main").removeClass("sticky");
				}
			});
		
			
			//吸顶灯效果---【了解】BOM案例：浏览器6个对象的方法使用
            //思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
			//      2.页面顶部到吸顶灯位置：200px，大于200px
			//      3.追加第一个样式：固定定位，页面顶部位置
						
			//      1.追加样式：吸顶灯卡在页面顶部	
			//      2.固定值：页面顶部到吸顶灯位置
			//      3.固定值>滚动值，滚动范围超出200px 实现切换
			
			
		});
		
		</script>
	</head>
	<body>
		<div id="top">顶部内容区域</div>
		<div id="main">我是吸顶元素</div>
		<div id="last">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi dignissimos. Sequi perspiciatis corrupti soluta sapiente, omnis nobis eum repellendus optio accusamus ab, culpa nemo repudiandae commodi impedit tempore beatae.</div>
		
	</body>
</html>